<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>233乐园</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        background-color: #f5f5f5;
      }

      .container {
        max-width: 100%;
        padding: 8px 4px 0 4px;
      }

      .waterfall {
        display: flex;
        gap: 8px;
        align-items: flex-start;
      }

      .column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .item {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-bottom: 2px;
        border: 1px solid #f2f2f2;
      }

      .item-title {
        padding: 10px 10px 4px 10px;
        font-size: 16px;
        font-weight: 700;
        color: #222;
        line-height: 1.2;
        letter-spacing: 0.5px;
      }

      .item-media {
        width: 100%;
        display: block;
        margin: 0;
        border-radius: 8px;
      }

      .item-desc {
        padding: 4px 10px 0 10px;
        font-size: 13px;
        color: #888;
        line-height: 1.4;
        min-height: 1.4em;
        max-height: none;
        display: block;
        overflow: visible;
        text-overflow: initial;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
      }

      .item-category {
        display: inline-block;
        margin: 6px 0 0 10px;
        padding: 2px 14px;
        font-size: 12px;
        color: #fff;
        background: linear-gradient(90deg, #ff9800 60%, #ffc107 100%);
        border-radius: 999px;
        box-sizing: border-box;
        font-weight: 500;
        letter-spacing: 0.5px;
        vertical-align: middle;
        line-height: 1.6;
        box-shadow: 0 1px 4px rgba(255, 152, 0, 0.08);
      }

      .item-author {
        display: flex;
        align-items: center;
        padding: 8px 10px 10px 10px;
        gap: 8px;
      }
      .item-author-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        background: #eee;
        border: 1px solid #f2f2f2;
      }
      .item-author-name {
        font-size: 13px;
        color: #333;
        font-weight: 500;
      }

      .loading {
        text-align: center;
        padding: 20px;
        color: #666;
        display: none;
      }

      .loading.active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="waterfall">
        <div class="column" id="col-left"></div>
        <div class="column" id="col-right"></div>
      </div>
      <div class="loading" id="loading">加载中...</div>
    </div>

    <script>
      // 工具函数：生成mock数据
      function mockData(page, pageSize, format = "array") {
        const arr = [];
        const categories = [
          "游戏",
          "生活",
          "美食",
          "旅行",
          "搞笑",
          "科技",
          "动漫",
        ];
        const names = ["小明", "小红", "阿猫", "阿狗", "小王", "小李", "小张"];
        for (let i = 0; i < pageSize; i++) {
          const isImg = Math.random() > 0.5;
          const height = Math.floor(Math.random() * 120) + 180; // 180~300
          const desc =
            (format === "object" ? "对象模式描述" : "数组模式描述") +
            Math.random().toString(36).slice(2, 8);
          const category =
            categories[Math.floor(Math.random() * categories.length)];
          const authorName = names[Math.floor(Math.random() * names.length)];
          const authorAvatar = `https://i.pravatar.cc/40?img=${Math.floor(
            Math.random() * 70 + 1
          )} `;
          const item = {
            id:
              (format === "object" ? "obj-" : "arr-") +
              page +
              "-" +
              i +
              "-" +
              Date.now(),
            title: `【${format === "object" ? "对象" : "数组"}模式】标题${
              page * pageSize + i + 1
            }`,
            type: isImg ? "image" : "video",
            url: isImg
              ? `https://picsum.photos/seed/${format}${
                  page * pageSize + i
                }/400/${height}`
              : format === "object"
              ? "https://www.w3schools.com/html/movie.mp4"
              : "https://www.w3schools.com/html/mov_bbb.mp4",
            desc: desc.slice(0, 20),
            height: height,
            category,
            authorName,
            authorAvatar,
          };
          arr.push(item);
        }
        if (format === "object") {
          return { list: arr, total: 1000 };
        }
        return arr;
      }

      // 获取url参数
      function getFormat() {
        const params = new URLSearchParams(window.location.search);
        return params.get("format") === "object" ? "object" : "array";
      }

      // 瀑布流渲染
      class Waterfall {
        constructor(left, right) {
          this.left = left;
          this.right = right;
          this.page = 0;
          this.pageSize = 20;
          this.loading = false;
          this.format = getFormat();
          this.handleScroll = this.handleScroll.bind(this);
          this.handleRefresh = this.handleRefresh.bind(this);
          this.init();
        }
        init() {
          this.load(true);
          window.addEventListener("scroll", this.handleScroll);
          let startY = 0,
            pull = false;
          document.addEventListener("touchstart", (e) => {
            if (window.scrollY === 0) {
              startY = e.touches[0].clientY;
              pull = true;
            }
          });
          document.addEventListener("touchmove", (e) => {
            if (
              pull &&
              window.scrollY === 0 &&
              e.touches[0].clientY - startY > 80
            ) {
              this.handleRefresh();
              pull = false;
            }
          });
        }
        async load(isRefresh = false) {
          if (this.loading) return;
          this.loading = true;
          document.getElementById("loading").classList.add("active");
          if (isRefresh) {
            this.page = 0;
            this.left.innerHTML = "";
            this.right.innerHTML = "";
          }
          setTimeout(() => {
            // 模拟异步
            let data = mockData(this.page, this.pageSize, this.format);
            if (this.format === "object") data = data.list;
            this.render(data);
            this.page++;
            this.loading = false;
            document.getElementById("loading").classList.remove("active");
          }, 500);
        }
        render(items) {
          let leftH = this.left.offsetHeight,
            rightH = this.right.offsetHeight;
          items.forEach((item) => {
            const div = document.createElement("div");
            div.className = "item";
            div.innerHTML = `
              <div class="item-title">${item.title}</div>
              ${
                item.type === "image"
                  ? `<img class="item-media" src="${item.url}" style="height:${item.height}px;" alt="${item.title}"/>`
                  : `<video class="item-media" style="height:${item.height}px;" controls>
                    <source src="${item.url}" type="video/mp4">您的浏览器不支持视频播放
                  </video>`
              }
              <div class="item-desc">${item.desc}<span class="item-category">${
              item.category
            }</span></div>
              <div class="item-author">
                <img class="item-author-avatar" src="${
                  item.authorAvatar
                }" alt="${item.authorName}"/>
                <span class="item-author-name">${item.authorName}</span>
              </div>
            `;
            if (leftH <= rightH) {
              this.left.appendChild(div);
              leftH += item.height + 90; // 估算高度
            } else {
              this.right.appendChild(div);
              rightH += item.height + 90;
            }
          });
        }
        handleScroll() {
          if (this.loading) return;
          const scrollTop = window.scrollY;
          const clientHeight = document.documentElement.clientHeight;
          const scrollHeight = document.documentElement.scrollHeight;
          if (scrollTop + clientHeight >= scrollHeight - 100) {
            this.load();
          }
        }
        handleRefresh() {
          this.load(true);
        }
      }

      document.addEventListener("DOMContentLoaded", () => {
        new Waterfall(
          document.getElementById("col-left"),
          document.getElementById("col-right")
        );
      });
    </script>
  </body>
</html>
